<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增书刊</title>
    <link rel="stylesheet" href="../css/addnewbook.css">
    <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <script src="../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
    <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <script src="../javaScript/data_management.js"></script>
    <script src="../javaScript/utl.js"></script>
    <script src="../javaScript/quanxianpanduan.js"></script>
</head>

<body>
    <div class="container" id="back">
        <div class="container" id="title">
            <div class="row">
                <div class="col-md-1">
                    <img src="../images/back.svg" alt="" onclick="back()">
                </div>
                <div class="col-md-10" id="middle">
                    <span>新增书刊</span>
                </div>
                <div class="col-md-1">
                    <img src="../images/chacha.png" alt="" onclick="back()">
                </div>
            </div>
        </div>

        <header class="container" id="header">
            <div class="row">
                <div class="col-md-2">
                    <span>快速录书方式</span>
                    <img src="../images/u3799.png" alt="">
                </div>
                <div class="col-md-2">
                    <span>ISBN自动查询</span>
                    <img src="../images/u3799.png" alt="">
                </div>
                <div class="col-md-3">
                    <span>自动截取分类号：</span>
                    <img src="../images/u3799.png" alt="">
                </div>
                <div class="col-md-5 ">
                    <input type="text" placeholder="请输入ISBN码查询" class="input" id="isbn_num">

                    <button class="yellow" onclick="select()">查询</button>

                    <button class="yellow" onclick="add()">+添加书刊</button>
                </div>
            </div>
        </header>

        <div class="container" id="xinxi">
            <div class="row">
                <div class="col-md-2">
                    <div id="fenmian">
                        <span>封面</span>
                    </div>
                </div>
                <div class="col-md-1">
                    <span>ISBN:</span> <br>
                    <span>作者:</span> <br>
                    <span>所在分馆:</span> <br>
                    <span>副书名:</span><br>
                    <span>出版社:</span> <br>
                    <span> 索引号:</span><br>
                    <span>存入时间:</span>
                </div>
                <div class="col-md-2">
                    <input type="text" name="" id="isbn">
                    <input type="text" name="" id="author">
                    <input type="text" name="" id="site">
                    <input type="text" name="" id="subtitle">
                    <input type="text" name="" id="publish">
                    <input type="text" name="" id="index_number">
                    <input type="text" name="" id="reserve_time">
                </div>
                <div class="col-md-1">
                    <span>书刊名称:</span><br>
                    <span>馆藏地址:</span><br>
                    <span>定价:</span><br>
                    <span>出版时间:</span><br>
                    <span>印次: </span> <br>
                    <span>正语种:</span> <br>
                    <span>添加人:</span>
                </div>
                <div class="col-md-2">
                    <input type="text" name="" id="book_name">
                    <input type="text" name="" id="site_library">



                    <input type="text" name="" id="price">
                    <input type="text" name="" id="publication_time">
                    <input type="text" name="" id="number">
                    <input type="text" name="" id="language">
                    <input type="text" name="" id="add_man">
                </div>

                <div class="col-md-1">
                    <span>馆藏分类:</span><br>
                    <span>分类号:</span><br>
                    <span>摘要:</span><br>
                    <span>出版地:</span><br>
                    <span>部次号:</span><br>
                    <span>页数:</span><br>
                    <span>层架名:</span>
                </div>
                <div class="col-md-2">
                    <input type="text" name="" id="book_class">
                    <input type="text" name="" id="class_num">
                    <input type="text" name="" id="content">
                    <input type="text" name="" id="chubanSite">
                    <input type="text" name="" id="buci">
                    <input type="text" name="" id="pages">
                    <input type="text" name="" id="layer">
                </div>
            </div>
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-1">
                    <span>备注:</span>
                </div>
                <div class="col-md-9">
                    <input type="text" class="long">
                    <button class="yellow" id="sure">确定</button>
                    <button class="yellow" id="reset">重置</button>
                </div>
            </div>
        </div>

        <div class="container" id="footer">


            <div class="row" id="secondrow">
                <div class="col-md-3">
                    <input type="text" placeholder="ISBN" id="num2">
                </div>
                <div class="col-md-3">
                    <input type="text" placeholder="书名" id="booktitle">
                </div>
                <div class="col-md-6">
                    <input type="text" placeholder="层架选择" id="short">

                    <button class="yellow" id="left">查询</button>

                    <button class="red" id="dele">删除单册</button>
                </div>
            </div>
        </div>

        <ul id="table" class="clear">
            <li>ISBN</li>
            <li>书名</li>
            <li>部次号</li>
            <li>层架名</li>
            <li>存入时间</li>
            <li>操作</li>
        </ul>
        <table border="">
            <tbody id="tbody">
            </tbody>
        </table>
    </div>

</body>
<script>
    isLogin()
    function back() {
        location.href = "./book-management.html"
    }
    //上面的查询按钮，通过isbn码查询，去比对Newbook 数据库，然后将对应的那个对象放在下面的xinxi的input
    //框里面
    function select() {
        // if(czqx(guanliname,'查询')){
        //   return
        // }
        let isbn = $('#isbn_num').val()

        for (let i = 0; i < Newbook.length; i++) {
            if (Newbook[i].ISBN == isbn) {


                //封面框
                $("#fenmian").html(`<img src='${Newbook[i].book_src}'>`)
                //第一列数据
                $('#isbn').val(Newbook[i].ISBN)
                $('#author').val(Newbook[i].author)
                $('#site').val(Newbook[i].site)
                $('#subtitle').val(Newbook[i].subtitle)
                $('#publish').val(Newbook[i].publish)
                $('#index_number').val(Newbook[i].index_number)
                $('#reserve_time').val(Newbook[i].reserve_time)
                //第二列数据
                $('#book_name').val(Newbook[i].book_name)
                $('#site_library').val(Newbook[i].site_library)
                $('#price').val(Newbook[i].price)
                $('#publication_time').val(Newbook[i].publication_time)
                $('#number').val(Newbook[i].number)
                $('#language').val(Newbook[i].language)
                $('#add_man').val(Newbook[i].add_man)
                //第三列数据
                $('#book_class').val(Newbook[i].book_class)
                $('#class_num').val(Newbook[i].class_num)
                $('#content').val(Newbook[i].content)
                $('#chubanSite').val(Newbook[i].chubanSite)
                $('#buci').val(Newbook[i].buci)
                $('#pages').val(Newbook[i].pages)
                $('#layer').val(Newbook[i].layer)
            }
        }
    }


    //重置按钮，点击重置按钮,清空所有输入框的数据
    $("#reset").click(function () {
        //清空input 框
        $('#isbn_num').val('')
        //清空封面框
        $("#fenmian").html('')

        //清空第一列数据
        $('#isbn').val('')
        $('#author').val('')
        $('#site').val('')
        $('#subtitle').val('')
        $('#publish').val('')
        $('#index_number').val('')
        $('#reserve_time').val('')
        //清空第二列数据
        $('#book_name').val('')
        $('#site_library').val('')
        $('#price').val('')
        $('#publication_time').val('')
        $('#number').val('')
        $('#language').val('')
        $('#add_man').val('')
        //清空第三列数据
        $('#book_class').val('')
        $('#class_num').val('')
        $('#content').val('')
        $('#chubanSite').val('')
        $('#buci').val('')
        $('#pages').val('')
        $('#layer').val('')
    })

    function showtable(data) {
        $('#tbody').html('')
        data.forEach(item => {
            $('#tbody').append(
                `
             <tr>
                <td>${item.ISBN}</td>
                <td>${item.book_name}</td>
                <td>${item.buci}</td>
                <td>${item.layer}</td>
                <td>${item.reserve_time}</td>
                <td></td>
             </tr>
             `
            )
        });
    }


    //下面的查询按钮！！！
    $('#left').click(function () {
        // if(czqx(guanliname,'查询')){
        //   return
        // }
        let num2 = $('#num2').val()
        let booktitle = $('#booktitle').val()
        let short = $('#short').val()

        if (num2 != '') {
            let numdata = Newbook.filter(item => item.ISBN == num2)
            showtable(numdata)
        }
        if (booktitle != '') {
            let booktitledata = Newbook.filter(item => item.book_name == booktitle)
            showtable(booktitledata)
        }
        if (short != '') {
            let mingdata = Newbook.filter(item => item.layer == short)
            showtable(mingdata)
        }



    })

    function add() {
        alert("添加成功!!!")
        //获取新增的书刊数据
        //第一列数据
        let isbn = $('#isbn').val()
        let author = $('#author').val()
        let site = $('#site').val()
        let subsite = $('#subtitle').val()
        let publish = $('#publish').val()
        let index_number = $('#index_number').val()
        let reserve_time = $('#reserve_time').val()
        //第二列数据
        let book_name = $('#book_name').val()
        let site_library = $('#site_library').val()
        let price = $('#price').val()
        let publication_time = $('#publication_time').val()
        let number = $('#number').val()
        let language = $('#language').val()
        let add_man = $('#add_man').val()
        //第三列数据
        let book_class = $('#book_class').val()
        let class_num = $('#class_num').val()
        let content = $('#content').val()
        let chubanSite = $('#chubanSite').val()
        let buci = $('#buci').val()
        let pages = $('#pages').val()
        let layer = $('#layer').val()


        let newobj = {
            "id": Newbook[Newbook.length - 1].id + 1,
            "ISBN": isbn,
            "author": author,
            "site": site,
            "subtitle": subsite,
            "publish": publish,
            "index_number": index_number,
            "reserve_time": reserve_time,
            "book_name": book_name,
            "site_library": site_library,
            "price": price,
            "publication_time": publication_time,
            "number": number,
            "language": language,
            "add_man": "张三", "book_class": book_class, "class_num": class_num,
            "content": content, "chubanSite": chubanSite,
            "buci": buci, "pages": pages, " layer": layer, "RFID": 0
        }
        console.log(newobj)
        sessionStorage.setItem("shuju", JSON.stringify(newobj))

    }
    //点击删除单册，在数据库里就要删除这个数据，splice,先删除这个节点
    $("#dele").click(function () {
        // if(czqx(guanliname,'删除')){
        //   return
        // }
        alert("确认要删除嘛？")
        let num2 = $('#num2').val()
        let booktitle = $('#booktitle').val()
        let short = $('#short').val()

        for (let i = 0; i < Newbook.length; i++) {
            if (Newbook[i].book_name == booktitle || Newbook[i].ISBN == num2 || Newbook[i].layer == short) {
                $('#tbody').children().eq(i).remove()
                Newbook.splice(i, 1)
            }
        }
    })
</script>

</html>